<template>
    <div id="container" ref="container" @scroll="handleScroll">
    <div class="item" v-for="item in list" :key="item.tid">
    <img :src="item.src" alt="">
    <span>{{ item.text }}</span>
    </div>
    <div ref="blank"></div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      list:[],
      page: 1,
      limit: 200,
    }
  },
  created() {
    this.getList()
    // .then((res) => {
    //   this.list = res;
    //   console.log(res)
    // })
  },
  computed: {
    maxPage() {
      return Math.ceil(this.list.lngth / this.limit)
    },
    showList() {
      return this.list.slice(0, this.page * this.limit)
    }
  },
  methods: {
    getList() {
    return new Promise((resolve) => {
        let self = this; //this 指向问题 
        var xhr = new XMLHttpRequest();
        xhr.open('get','http://127.0.0.1:3000')
        xhr.send();
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200 ) {
                resolve(JSON.parse(xhr.responseText))
                // this.list = JSON.parse(xhr.responseText)  错误，这里的this指的是不是vue的实例，而是onreadystatechange的this
                self.list = JSON.parse(xhr.responseText)
                console.log('123');
            }
        }
    })
},
handleScroll() {
  if(this.page > this.maxPage) return;
    console.log('444')
    // const clientHeight = this.$refs.container.clientHeight;
    const blackTop = this.$refs.blank.getBoundingClientRect()
    console.log(blackTop)
  
}
  },
}
</script>
<style>
#container {
  height: 100vh;
  overflow: auto;
}
</style>